<style lang="less" scoped>
@import url("../static/css/base/reset.less");
.bg {
  background-size: 100%;
  background-repeat: no-repeat;
}
.btn {
  margin: auto;
  &:extend(.bg);
  width: 268px;
  height: 48px;
  font-size: 19px;
  color: #fff;
  line-height: 44px;
  text-align: center;
}
.borderBottom(@bdColor) {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: @bdColor;
    height: 1px;
    width: 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
@red: #441f00;
.cityBox {
  position: relative;
  top: 31.89%;
}
.cityLabel {
  font-size: 12px;
  color: @red;
  text-align: center;
}
.wrap {
  width: 260px;
  margin: auto;
  margin-top: 7.5px;
  padding: 0 20px;
  height: 143px;
  overflow: hidden;
  overflow-y: auto;
}
.cityLine {
  height: 38px;
  line-height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .borderBottom(rgba(106,73,21,0.23));
}
.namebox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name {
  font-size: 16px;
  color: @red;
  font-weight: bolder;
}
.calls {
  font-size: 16px;
  color: @red;
}
.check {
  background-image: url("../static/image/icon_check.png?__sprite");
  width: 22px;
  height: 22px;
  margin-right: 10px;
  &:extend(.bg);
}
.checked {
  &:extend(.check);
  background-image: url("../static/image/icon_checked.png?__sprite");
  width: 26px;
}
.btn_call {
  &:extend(.btn);
  background-image: url("../static/image/btn_red.png?__sprite");
  margin-top: 17px;
}
</style>
<template>
<div class="page1">
<vueHeader></vueHeader>
  <div class="cityBox" v-cloak>
    <div class="cityLabel">选择您要打Call的省市区</div>
    <div class="wrap">
      <div class="cities">
        <div class="cityLine" v-for="(v,i) in rl" :key="v.code">
          <div class="namebox" @click="checkCity(v.code)">
          <div :class="['check',{'checked':!!v.check}]"></div>
          <div class="name">{{v.province}}</div>
          </div>
          <div class="calls">当前Call值 {{v.call}}</div>
        </div>
      </div>
    </div>
    <div class="btn_call" v-show="!!cur" @click="startCall()">
      开始打Call
    </div>
  </div>
  </div> 
  
</template>

<script>
import ajaxData from "../static/modules/ajaxData";
import vueHeader from "./header";
import Vue from "vue/dist/vue";
import util from "../static/modules/util";
export default {
  components: {
    vueHeader
  },
  data() {
    return {
      rl: [],
      cur:null,
      city:""
    };
  },
  computed: {},
  methods: {
    getList() {
      ajaxData.ranking2(data => {
        console.log(data);
        this.rl = data;
        this.rl[0].check = 1;
        this.cur=this.rl[0].code;
      });
    },
    checkCity(code) {
      this.rl.forEach((v, i) => {
        v.check = 0;
        if (v.code == code) {
          v.check = 1;
          Vue.set(this.rl, i, v);
          this.cur=code;
          this.city=v.province;
        }
      });
    },
    startCall(){
      util.storage.setItem("my_city",this.city);
      this.$router.push(`/my_city/${this.cur}`);
    }
  },
  created() {
    this.getList();
  }
};
</script>
